<template>
  <div>
    <Card v-for="item in 10" :key="item" class="card">
      <!-- 标题 -->
      <div slot="title">
        <img src="../assets/image/kn.png" class="class-image"/>
        <h4 class="class-name">2020春_PY_金牌_337</h4>
      </div>
      <!-- 内容 -->
      <Form>
        <FormItem label="教师:">{{FormData.teacherName}}</FormItem>
        <FormItem label="人数:">{{FormData.count}} 人</FormItem>
        <FormItem label="计划:">
          <Button type="text" size="small" class="class-btn-text">{{FormData.plan}}</Button>
        </FormItem>
        <FormItem label="类型">{{type[FormData.type]}} 班</FormItem>
        <FormItem label="状态">{{type[FormData.state]}}</FormItem>
        <FormItem label="进展">{{FormData.progress}}</FormItem>
        <FormItem label="校区">{{FormData.scholl}}</FormItem>
      </Form>
      <!-- 更多内容 -->
      <div class="class-more-icon">
        <Icon type="ios-arrow-up" />
      </div>
      <!-- 更多内容信息
       显示与隐藏
       过渡
       footer z-index > more-info
       display visibility
       display:none/block 直接删除元素 元素不存在文件流里面
       visibility:hidden/visible 元素存在文件流里面
       transition:过渡的样式 时间 作用在元素上面
       setTimeOut() 时间延迟
       position absolute
       bottom
       opacity:0-1-->
      <div class="class-more-info">
        <div class="class-more-icon">
          <Icon type="ios-arrow-up" />
        </div>
        <Form>
          <FormItem label="教师:">{{FormData.teacherName}}</FormItem>
          <FormItem label="人数:">{{FormData.count}} 人</FormItem>
          <FormItem label="计划:">
            <Button type="text" size="small" class="class-btn-text">{{FormData.plan}}</Button>
          </FormItem>
          <FormItem label="类型">{{type[FormData.type]}} 班</FormItem>
          <FormItem label="状态">{{type[FormData.state]}}</FormItem>
        </Form>
      </div>
      <!-- 底部 -->
      <div class="class-footer">
        <span>
          <Button type="text" size="small" class="class-btn-text">学生</Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text">统计</Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text">考试</Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text">上课</Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text">编辑</Button>
        </span>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      type:['集训','金牌','体验'],
      state:['准备','进行中','结束'],
      FormData:{
        teacherName:'康子娟',
        count:15,
        plan:'2020春_PY_金牌_337',
        type:1,
        state:1,
        progress:15.00,
        scholl:'山东东营校区'
      }
    }
  },
  components: {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped="scoped">
  .card{
    float: right;
  }
  .class-image{
    border-radius: 8px;
    width: 80px;
    height: 60px;
  }
  .ivu-card{
    width: 300px;
  }
  .class-name{
    padding: 8px 0;
  }
  .ivu-form-item{
    margin-bottom: 0;
  }
  .class-btn-text{
    color: #1A99F9;
  }
  .class-more-icon{
    text-align: center;
    height: 38px;
  }
  .class-footer{
    border-top: 1px dashed #dedede;
    text-align: center;
    padding: 0 5px;
  }
  .ivu-card-body{
    padding: 0 8px;
  }
  .ivu-form{
    padding: 0 5px;
  }
  .class-more-info{
    display: none;
  }
</style>
